<template>
  <div>
      <el-button @click.native="downloadPDF"> 资料保存为PDF </el-button>
    <el-row :gutter="20">
      <el-col :span="4">
        <img
          style="width: 100%"
          src="http://q4.qlogo.cn/headimg_dl?dst_uin=2857734156&spec=100"
          alt=""
        />
      </el-col>
      <el-col :span="16">
        <h2>{{ userInfo.studentName || userInfo.teacherName }}</h2>
        <p class="info">
          <i class="el-icon-s-home"></i>
          {{ userInfo.studentNowAddress || userInfo.teacherNowAddress }}
        </p>
        <p style="height: 100px; overflow: scroll">
          {{ userInfo.studentRecommend || userInfo.teacherRecommend }}
        </p>
      </el-col>
      <el-col :span="4">
        
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <h3>个人资料</h3>
        <el-row :gutter="20">
          <el-col :span="5" style="text-align: right">
            <p>ID:</p>
            <p>姓名：</p>
            <p>出生日期：</p>
            <p>电子邮件：</p>
            <p>电话：</p>
            <p>地址：</p>
            <p>技能：</p>
          </el-col>
          <el-col :span="19">
             <p>{{ userInfo._id }}</p>
            <p>{{ userInfo.studentName || userInfo.teacherName }}</p>
            <p>
              {{
                userInfo.studentBirthday ||
                userInfo.teacherBirthday | formatNowDate
              }}
            </p>
            <p>{{ userInfo.studentEmail || userInfo.teacherEmail }}</p>
            <p>{{ userInfo.studentPhone || userInfo.teacherPhone }}</p>
            <p>
              {{ userInfo.studentNowAddress || userInfo.teacherNowAddress }}
            </p>
            <p v-if="skill !== ''">
              <span v-for="i in skill" :key="i" class="tag"> {{ i }} </span>
            </p>
            <p v-else>暂无</p>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "Profile",

  data() {
    return {
    };
  },

  mounted() {},

  computed: {
    ...mapState("user", ["userInfo"]),
    skill() {
      let skill = (this.userInfo.teacherSkill || this.userInfo.studentSkill);
      if(skill){
        return  skill.join().split(",");
      }else{
        skill = "";
      }
      return skill;
    },
  },

  methods: {
    downloadPDF() {
      this.$confirm("打印时建议关闭侧边栏！", "选择输出方式", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$bus.$emit("print",false)  
          setTimeout(() => {
            const res = window.print();
            this.$bus.$emit("print",true)  
            console.log(res);
          }, 1000);
        })
        .catch(() => {
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.tag {
  display: inline-block;
  padding: 10px;
  font-size: 14px;
  background: #08f;
  color: white;
  margin: 5px;
}
</style>
